<template>
	<div class="replay-container" ref="replayContainer"></div>
</template>

<script>
	import 'dplayer/dist/DPlayer.min.css'
	import DPlayer from 'dplayer'
	import roomDefault from '../../assets/images/default/room-icon-default.jpg'
	export default{
		name:'ReplayContainer',
		props:{
			replayUrl:{
				type:String
			}
		},
		data(){
			return{
				dplayer:null
			}
		},
		created(){
			this.roomDefault = !window.is_official ? require('@/assets/images/default/room-icon-default.jpg') : require('@/assets/images/deticateIp/room-default-over.jpg')
		},
		methods:{
			initDplayer(replayUrl) {
				this.dplayer = new DPlayer({
					container: this.$refs.replayContainer,
					autoplay: true,
					theme:'#4360f0',
					hotkey:false,
					video: {
						url: replayUrl,
						pic: this.roomDefault
					}
				})
			},
			destroyPlayer(){
				this.dplayer.destroy()
			}
		}
	}
</script>

<style lang='scss' scoped>
	.replay-container{
		position: absolute;
		top: 50%;
		width: 100vw;
		height: calc(9 / 16 * 100vw);
		transform: translateY(-50%);
	}
</style>
